<template>
  <div class="app-container">
    <el-button @click="dialogFormVisible = true">添加套餐</el-button>

    <!-- 套餐列表 -->

    <el-table :data="pckList" stripe style="width: 100%">
      <el-table-column prop="id" label="套餐id" width="180"> </el-table-column>
      <el-table-column prop="name" label="套餐名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="套餐价格"> </el-table-column>
      <el-table-column prop="timeunit" label="时间单位"> </el-table-column>
      <el-table-column prop="status" label="套餐状态">
        <template slot-scope="scope">
          {{ scope.row.status == 0 ? "启用" : "禁用" }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="套餐备注"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="update(scope.row)"
            icon="el-icon-edit"
            type="primary"
            size="mini"
            >修改</el-button
          >
          <el-button
            @click="del(scope.row)"
            icon="el-icon-delete"
            type="danger"
            size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改套餐的弹框 -->
    <el-dialog title="修改套餐" :visible.sync="dialogFormVisibleXG">
      <el-form>
        <el-form-item label="套餐名称" :label-width="formLabelWidth">
          <el-input v-model="pack.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐价格" :label-width="formLabelWidth">
          <el-input v-model="pack.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐状态" :label-width="formLabelWidth">
          <el-input v-model="pack.status" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐备注" :label-width="formLabelWidth">
          <el-input v-model="pack.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            toupdate();
            dialogFormVisibleXG = false;
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加套餐弹框 -->
    <el-dialog title="添加套餐" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="套餐名">
          <el-input v-model="pck.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐价格">
          <el-input v-model="pck.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐时间单位">
          <el-radio v-model="pck.timeunit" label="月">月</el-radio>
          <el-radio v-model="pck.timeunit" label="季度">季度</el-radio>
          <el-radio v-model="pck.timeunit" label="年">年</el-radio>
        </el-form-item>
        <el-form-item label="套餐时间">
          <el-input v-model="pck.timenum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐备注">
          <el-input
            type="textarea"
            v-model="pck.remark"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="套餐权限">
          <el-checkbox-group v-model="pck.permIds">
            <el-checkbox
              v-for="(item, index) in permList"
              :key="index"
              :label="item.id"
              >{{ item.permName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>

    <div ref="qrcode"></div>
  </div>
</template>
<script>
import { fetchAllPerms, add, page, update, del } from "@/api/pck";

import { status } from "nprogress";
import QRCode from "qrcodejs2-fix";

export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisibleXG: false,
      pck: {
        permIds: [],
      },
      permList: [],

      pckList: [],
      //分页信息
      pageDto: {
        now: 1,
        size: 5,
        where: {
          name: "",
        },
      },
      //修改
      pack: [],
    };
  },
  methods: {
    add() {
      this.pck.permIds = JSON.stringify(this.pck.permIds);
      add(this.pck).then((res) => {
        this.$message({
          type: res.ok ? "success" : "error",
          msg: res.message,
        });
        this.dialogFormVisible = false;
        this.search();
      });
    },

    search() {
      page(this.pageDto).then((res) => {
        this.pckList = res.list;
        console.log(res);
      });
    },
    //修改
    update(data) {
      this.dialogFormVisibleXG = true;
      this.pack = data;
    },
    toupdate() {
      update(this.pack).then((res) => {
        this.search();
        this.pack = [];
        if (res.ok) {
          this.$message({
            type: res.ok ? "success" : "error",
            message: res.ok ? "success" : "error",
          });
        }
      });
    },
    //删除
    del(data) {
      del(data).then((res) => {
        if (res.ok) {
          this.$message({
            type: res.ok ? "success" : "error",
            message: res.ok ? "success" : "error",
          });
        }
        this.search();
      });
    },
  },
  created() {
    this.search();
    //获取所有的权限列表
    fetchAllPerms().then((res) => {
      this.permList = res.data;
    });
  },
};
</script>
<style lang="css"></style>
